<template>
	<view style="padding-top: 88rpx;width: 750rpx;overflow-x: hidden;overflow-y: hidden;">
		<view class="bg"></view>
		<view class="top">
			<view class="top_icon" @click="toPrevious">
				<image src="https://z3.ax1x.com/2021/07/23/WrF6FH.png"></image>
			</view>
		</view>
		<view class="content">
			<video　:poster="param.image" class="content_video" :src="param.video" :controls="true" objectFit="cover" @error="errorVideo(param.video)"></video>
			<!-- <video　:poster="param.image" class="content_video" src="https://media.w3.org/2010/05/sintel/trailer.mp4" objectFit="cover"></video> -->
			<view class="content_">
				<view class="content_theme">{{param.title}}</view>
				<view class="hr"></view>
				<view class="content_text"><rich-text :nodes="param.description"></rich-text></view>
				<view class="hr"></view>
				<view class="content_image_">
					<image v-for="(item,index) in param.images" :key="index" class="image1" @click="previewImage(index)" :src="item" :class="index == urls.length-1 ? 'imageBottom' : ''" mode="widthFix"></image>
				</view>
			</view>
		</view>
		<view class="bottom">
			<view class="bottom_WeChat" @click="toShowWeChat">
				<image src="https://z3.ax1x.com/2021/07/23/Wr1sJ0.png"></image>
				<view class="bottom_WeChat_text">联系方式</view>
			</view>
			<view class="bottom_share">
				<button open-type="share">
					<image src="https://z3.ax1x.com/2021/07/23/Wr1riq.png"></image>
					<view class="bottom_share_text">分享作品</view>
				</button>
			</view>
		</view>
		<view　v-if="scrollTop　>　10" class="toTop" @click="clickToTop"><image src="https://z3.ax1x.com/2021/07/23/Wr1yWV.png"></image></view>
		<!-- 遮罩层 -->
		<u-mask :show="isShowChat" @click="isShowChat = false">
			<view class="warp">
				<view class="rect" @tap.stop>
					<image class="rect_image" src="https://case.lclook.com/profile/upload/wechat.png"></image>
					<view class="rect_">
						<view class="rect_preservation" @click="preservationImage">保存图片</view>
						<view class="rect_copy" @click="copy">复制微信号</view>
					</view>
					<image  @click="isShowChat = false" class="rect_cancel_image" src="https://z3.ax1x.com/2021/07/23/Wrqw24.png"></image>
				</view>
			</view>
		</u-mask>
		
		<view class="bg-set-low"></view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				param: {},
				isShowChat: false,
				scrollTop:　0,
				urls: ['https://z3.ax1x.com/2021/07/27/W5dGrV.png', 'https://z3.ax1x.com/2021/07/27/W5dl2n.png', 'https://z3.ax1x.com/2021/07/27/W5d1vq.png', 'https://z3.ax1x.com/2021/07/27/W5dQ8s.png', 'https://z3.ax1x.com/2021/07/27/W5dMCj.png'],
			}
		},
		onLoad(param) {
			this.param = JSON.parse(decodeURI(param.item))
			this.param.description = this.param.description.replace(/\n/g, '<br/>')
			console.log("this.param", this.param)
		},
		onShareAppMessage() {
			return {
				provider: 'weixin',
				scene: 'WXSceneSession',
				type: 0,
				title: "我发现分享了一个品牌作品，一起来看看吧。",
				imageUrl: this.param.image,
			}
		},
		onPageScroll : function(e) {
			this.scrollTop  = e.scrollTop
		},
		methods: {
			toPrevious() {
				let page = getCurrentPages()
				if(page.length <= 1){
					uni.redirectTo({
						url: '../index/index'
					})
				}else{
					uni.navigateBack()
				}
			},
			previewImage(index) {
				uni.previewImage({
					current: index,
					urls: this.urls,
					indicator: 'number',
					loop: true
				})
			},
			clickToTop() {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 150,
				})
			},
			toShowWeChat() {
				this.isShowChat = true
			},
			copy() {
				uni.setClipboardData({
					data: 'LCBLOC',
					success:(res) => {
						uni.showToast({
							title: "复制成功",
							icon: 'none'
						})
					}
				})
			},
			errorVideo(src){
				uni.showToast({
					icon: "none",
					title: "视频错误 请联系管理人员 为你加载默认视频",
					duration: 2000
				})
				this.param.video = "https://media.w3.org/2010/05/sintel/trailer.mp4"
				
				// uni.request({
				// 	url: "https://media.w3.org/2010/05/sintel/trailer.mp4",
				// 	success: (res) => {
				// 		console.log("res——src",res)
				// 	},
				// 	fail: (err) => {
				// 		console.log("res——err",err)
				// 	},
				// 	complete: (c) => {
				// 		onsole.log("res——c",c)
				// 	}
				// })
				return src
			},
			preservationImage(){
				uni.showLoading({
					title: "保存中..."
				})
				// 网络图片不可以直接保存 后期需要 下载图片 在成功事件保存图片
				uni.downloadFile({
					url: "https://case.lclook.com/profile/upload/wechat.png",
					success:(res) => {
						if(res.statusCode === 200){
							let file = res.tempFilePath
							uni.saveImageToPhotosAlbum({
								filePath: file,
								success:() => {
									uni.hideLoading()
									uni.showToast({
										title: "保存成功",
										icon: "none",
									})
								},
								fail:() => {
									uni.hideLoading()
									uni.showToast({
										title: "保存失败 请截图",
										icon: "none",
										duration: 2500
									})
								}
								
							})
						}
					}
				})
			},
			
		}
	}
</script>

<style>
	.bg{
		position: fixed;
		top: 0;
		width: 750rpx;
		height: calc(100vh - 264rpx);
		background: #000000;
		z-index: -1;
	}
	.bg-set-low{
		position: fixed;
		bottom: 0;
		width: 750rpx;
		height: 264rpx;
		z-index: -1;
		background: linear-gradient(#000000, #2f1002);
	}
	.top{
		position: fixed;
		top: 76rpx;
		left: 10rpx;
		z-index: 10;
	}
	.top_icon image{
		width: 112rpx;
		height: 112rpx;
	}
	.content{
		width: 750rpx;
		/* margin-bottom: 126rpx; */
		padding-bottom: 126rpx;
		margin-top: 200rpx;
	}
	.content_video{
		width: 750rpx;
		height: 400rpx;
		border-radius: 24rpx;
		object-fit: fill;
	}
	.content_{
		margin: 32rpx 40rpx 0 40rpx;
	}
	.content_theme{
		font-size: 36rpx;
		color: #FFFFFF;
		line-height: 50rpx;
	}
	.content_ .hr{
		width: 670rpx;
		height: 1.2rpx;
		background-color: #FFFFFF;
		opacity: 0.24;
		margin-top: 32rpx;
	}
	.content_text{
		margin-top: 32rpx;
		color: #FFFFFF;
		opacity: 0.64;
		line-height: 34rpx;
		font-size: 26rpx;
		letter-spacing: 1rpx;
	}
	.content_text{
		margin-top: 32rpx;
		color: #FFFFFF;
		opacity: 0.64;
		line-height: 34rpx;
		font-size: 26rpx;
		letter-spacing: 2rpx;
	}
	.content_image_{
		margin-top: 40rpx;
		/* margin-bottom: 92rpx; */
		/* width: 750rpx; */
		font-size: 0;
	}
	.content_image_ image{
		width: 670rpx;
		height: 336rpx;
	}
	
	.bottom{
		width: 670rpx;
		height: 116rpx;
		position: fixed;
		bottom: 0;
		background-color: #000000;
		z-index: 10;
		margin-left: 40rpx;
		border-radius: 24rpx;
		padding: 12rpx;
	}
	.bottom_WeChat{
		width: 318rpx;
		height: 92rpx;
		border-radius: 16rpx;
		border: 1.6rpx #F45408 solid;
		display: inline-block;
		color: #F45408;
		vertical-align:top;
		/* padding: 24rpx 0; */
		text-align: center;
	}
	.bottom_WeChat image{
		margin-top: 22rpx;
		width: 48rpx;
		height: 48rpx;
		display: inline-block;
		line-height: 36rpx;
		vertical-align:top;
	}
	.bottom_WeChat_text{
		margin-top: 24rpx;
		display: inline-block;
		font-size: 32rpx;
		margin-left: 4rpx;
		letter-spacing: 2rpx;
	}
	.bottom_share{
		width: 316rpx;
		height: 92rpx;
		margin-left: 12rpx;
		border-radius: 16rpx;
		background-color: #F45408;
		display: inline-block;
		color: #FFFFFF;
		text-align: center;
	}
	.bottom_share image{
		 margin-top: 22rpx;
		 width: 48rpx;
		 height: 48rpx;
		 display: inline-block;
		 vertical-align:top;
	}
	.bottom_share_text{
		margin-top: 8rpx;
		display: inline-block;
		font-size: 32rpx;
		margin-left: 4rpx;
		letter-spacing: 2rpx;
		vertical-align:top;
	}
	.toTop{
		position: fixed;
		bottom: 138rpx;
		right: 32rpx;
	}
	.toTop image{
		width: 162.5rpx;
		height: 146rpx;
	}
	
	.warp {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
	}
	
	.rect {
		width: 630rpx;
		height: 738rpx;
		/* background-color: #fff; */
	}
	.rect .rect_image{
		width: 630rpx;
		height: 662rpx;
	}
	.rect_{
		position: absolute;
		left: 164rpx;
		text-align: center;
		font-size: 28rpx;
	}
	.rect_preservation{
		position: relative;
		top: -172rpx;
		width: 206rpx;
		height: 84rpx;
		letter-spacing: 2rpx;
		border-radius: 16rpx;
		background-color: #FFFFFF;
		line-height: 36rpx;
		padding-top: 22rpx;
		color: #F45408;
		border: #F45408 1.6rpx solid;
		display: inline-block;
	}
	.rect_copy{
		position: relative;
		top: -172rpx;
		display: inline-block;
		width: 206rpx;
		height: 84rpx;
		color: #FFFFFF;
		letter-spacing: 2rpx;
		background-color: #F45408;
		border-radius: 16rpx;
		padding-top: 22rpx;
		margin-left: 12rpx;
	}
	.rect_cancel_image{
		position: relative;
		left: 276rpx;
		top: -20rpx;
		width: 76rpx;
		height: 76rpx;
	}
	.imageBottom{
		/* margin-bottom: 125rpx; */
	}
	.bottom_share button{
		margin: 0;
		padding: 0;
		width: 316rpx;
		height: 92rpx;
		/* line-height: 92rpx; */
		/* vertical-align: auto; */
		background-color: #ffffff00;
		color: #FFFFFF;
	}
</style>
